<template>
  <h1>disease-info</h1>
<div>
  <show_nine_class/>
</div>

  <!-- 科室和数据的左右排列 -->
  <div class="department-container">
    <div class="left-column">
      <h3>科室</h3>
      <div class="department-list">
        <div v-for="(dept, index) in department" :key="index" class="department-item">
          {{ dept.name }}
        </div>
      </div>
    </div>
  </div>
</template>


<script setup>
import show_nine_class from '../Jump-router-one/show_nine_class.vue'
import { onMounted, ref } from "vue"
import axios from "axios"
ref([]);
const department = ref([])

onMounted(() => {
  // 获取科室数据
  axios.get(`http://localhost:8000/app/department/`)
      .then(res => {
        console.log(res.data)
        department.value = res.data
      })
})
</script>



<style scoped>

/* 科室和数据的左右排列容器 */
.department-container {
  display: flex;
  gap: 20px;
}

.left-column, .right-column {
  flex: 1;
}

/* 科室列表容器 */
.department-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 单个科室项 */
.department-item {
  border: 1px solid #ccc;
  padding: 10px;
  flex-basis: calc(16.6667% - 10px); /* 每行显示6个科室，减去gap */
  margin-bottom: 10px;
}
</style>
